import React from 'react';
import { useSpring, animated } from 'react-spring';
import styles from './Hua.module.css';

export default function Hua({ currentLevel = 4, onLevelChange }) {
    const levels = [1, 2, 3, 4, 5, 6]; // 保持自然顺序
    const radius = 120;
    const center = { x: 125, y: 150 };

    // 关键修改：使用标准角度计算（从左到右）
    const { angle } = useSpring({
        angle: Math.PI * (currentLevel - 1) / (levels.length - 1),
        config: { tension: 170, friction: 12 }
    });

    // 标准坐标计算（从左到右）
    const getSliderPosition = (angle) => ({
        x: center.x + Math.cos(angle) * radius,
        y: center.y - Math.sin(angle) * radius
    });

    const handleLevelChange = (level) => {
        if (onLevelChange) onLevelChange(level);
    };

    return (
        <div className={styles.memberlevelcontainer}>
            <div className={styles.header}>
                <h2>会员等级</h2>
                <span className={styles.infolink}>会员等级说明</span>
            </div>
            
            <div className={styles.arccontainer}>
                <svg width="250" height="180" viewBox="0 0 250 180" className={styles.arcsvg}>
                    {/* 关键修改：保持原始路径方向 */}
                    <path 
                        d="M30,150 A120,120 0 0,1 220,150" 
                        fill="none" 
                        stroke="#FFA500" 
                        strokeWidth="2"
                    />
                    
                    <animated.g 
                        style={{
                            transform: angle.to(angle => {
                                const pos = getSliderPosition(angle);
                                return `translate(${pos.x}px, ${pos.y}px)`;
                            })
                        }}
                    >
                        <circle r="10" fill="#FFA500" stroke="#FFF" strokeWidth="2" />
                    </animated.g>
                    
                    {/* 关键修改：直接按自然顺序渲染标记点 */}
                    {levels.map(level => {
                        const angle = Math.PI * (level - 1) / (levels.length - 1);
                        const pos = getSliderPosition(angle);
                        return (
                            <g 
                                key={`level-${level}`} 
                                onClick={() => handleLevelChange(level)}
                                className={styles.levelpoint}
                            >
                                <circle 
                                    cx={pos.x} 
                                    cy={pos.y} 
                                    r={6} 
                                    fill="#FFF" 
                                    stroke="#FFA500"
                                />
                                <text 
                                    x={pos.x} 
                                    y={pos.y + 20} 
                                    textAnchor="middle" 
                                    fill="#FFF"
                                    fontSize="12"
                                >
                                    V{level}
                                </text>
                            </g>
                        );
                    })}
                </svg>
            </div>
        </div>
    );
}